<template>
  <a-modal
    :title="data.departmentId && '编辑审批设置'||'新增审批设置'"
    centered
    :visible="true"
    width="700"
    @cancel="dialogClosed"
  >

    <a-form
      :form="form"
    >
      <a-row style="width:700px">
        <a-col :lg="24" :md="24" :sm="24">
          <a-form-item label="适应部门" class="label-width-auto" v-bind="formItemLayout">
            <a-select
              v-decorator="[ 'departmentId', {
                rules: [{ required: true, message: '请选择一个部门' }],
              }]"
              placeholder="请选择"
            >
              <a-select-option
                v-for="item in departmentList"
                :key="item.deptId"
                :value="item.deptId"
              >
                {{ item.deptName }}
              </a-select-option>

            </a-select>

          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :lg="24" :md="24" :sm="24">
          <a-form-item label="审批人" class="label-width-auto" v-bind="formItemLayout">
            <a-select
              v-decorator="[ 'selectedStaffs', {
                rules: [{ required: true, message: '请选择员工' }]
              }]"
              mode="multiple"
              placeholder="请选择"
              :filter-option="handleSelectFilter"
            >
              <a-select-option
                v-for="item in staffList"
                :key="item.userId"
                :value="item.userId"
              >
                {{ item.name }}
              </a-select-option>

            </a-select>

          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :lg="24" :md="24" :sm="24">
          <a-form-item label="抄送人" class="label-width-auto" v-bind="formItemLayout">
            <a-select
              v-decorator="[ 'selectedCopyStaffs', {}]"
              mode="multiple"
              placeholder="请选择"
              :filter-option="handleSelectFilter"
            >
              <a-select-option
                v-for="item in staffList"
                :key="item.userId"
                :value="item.userId"
              >
                {{ item.name }}
              </a-select-option>

            </a-select>

          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <span slot="footer" class="dialog-footer">
      <a-button @click="dialogClosed()">取消</a-button>
      <a-button id="submit" :loading="submitButton.status" type="primary" @click="dataFormSubmit()">{{ submitButton.text }}</a-button>
    </span>
  </a-modal>
</template>
<style lang="less" scoped>
  .ant-form-item{
    margin-bottom: 5px;
  }
</style>

<script>
import { edit, get } from '@/pages/attendance/api/attendanceApprovalSetting'
import { getStaff } from '@/utils/department'
import formItem from '@/config/formItemLayout'
export default {
  name: 'AttendanceSpecialScheduleSave',
  props: {
    data: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      form: this.$form.createForm(this, { onValuesChange: this.onValuesChange }),
      formItemLayout: formItem,
      dataForm: {
        departmentId: null
      },
      departmentList: [],
      staffList: [],
      submitButton: {
        text: '提交',
        status: false
      },
      restOrWork: '上班'
    }
  },
  mounted () {
    this.$departmentListFunc().then(data => {
      this.departmentList = data
    })

    this.$ajaxSend(getStaff, { pageSize: -1 }, {
      success: datas => {
        this.staffList = datas.records.filter(data => data.userId)
      }
    })
    if (this.data.departmentId) {
      this.$ajaxSend(get, this.data.departmentId, {
        success: (data) => {
          data.selectedStaffs = data.filter(setting => !setting.isCopy).map(setting => setting.userId)
          data.selectedCopyStaffs = data.filter(setting => setting.isCopy).map(setting => setting.userId)
          data.departmentId = data[0].departmentId
          this.dataForm = data
          this.$initForm(this.form, data)
        }
      })
    }
  },
  methods: {
    dialogClosed () {
      this.$emit('dialogClosed')
    },
    // 表单提交
    dataFormSubmit () {
      console.log(this.form.getFieldsValue([`departmentId`]))
      this.$saveQuit('form', edit(this.form.getFieldsValue([`departmentId`]).departmentId), (data) => {
        const selectedStaffs = data.selectedStaffs.map(setting => { return { userId: setting } })
        const selectedCopyStaffs = []
        if (data.selectedCopyStaffs) {
          data.selectedCopyStaffs.map(setting => { return { userId: setting, isCopy: 1 } })
        }
        return [...selectedStaffs, ...selectedCopyStaffs]
      })
    },
    onValuesChange (props, value) {
      console.log('value', value)
      if (value.restOrWork) {
        this.restOrWork = value.restOrWork
      }
    },
    handleSelectFilter (v, o) {
      return (
        o.componentOptions.children[0].text.toLowerCase().indexOf(v.toLowerCase()) >= 0
      )
    }
  }
}
</script>
